<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red {
            background-color: #f00;
        }
    </style>
</head>

<body>
    <table class="table">
        <!-- <tr class="tr">
            <th class="th">姓名</th>
            <th class="th">年龄</th>
            <th class="th">性别</th>
        </tr>
        <tr class="tr red">
            <td class="td">jack</td>
            <td class="td">18</td>
            <td class="td">boy</td>
        </tr>
        <tr class="tr">
            <td class="td">lala</td>
            <td class="td">17</td>
            <td class="td">girl</td>
        </tr>
        <tr class="tr red">
            <td class="td">rose</td>
            <td class="td">16</td>
            <td class="td">girl</td>
        </tr> -->
    </table>
    <script>
        var table = document.querySelector(".table")

        var arr = [
            {
                name: 'jack',
                age: 18,
                gender: 'boy'
            },
            {
                name: 'rose',
                age: 20,
                gender: 'girl'
            },
            {
                name: 'top',
                age: 22,
                gender: 'boy'
            }
        ]


        var html = `<tr class="tr">
            <th class="th">姓名</th>
            <th class="th">年龄</th>
            <th class="th">性别</th>
        </tr>`;


        arr.forEach(function (item, key) {
            var aa = `<tr ${(key % 2 == 0) ? "class=red" : ""}>` + '<td>' + item.name + '</td>' +
                '<td>' + item.age + '</td>' +
                '<td>' + item.gender + '</td>' + '</tr>'
            html += aa
        })
        table.innerHTML = html







    </script>
</body>

</html>